<template>
  <div class="container">
    <NavBar title="影城卡"></NavBar>
    <div class="wrapper" ref="wrapper">
      <ul class="w-content">
        <li>
          <div class="card mt0">
            <div class="header">
              <div class="left">耀莱成龙影城影城卡</div>
              <div class="right">10元起</div>
            </div>
            <div class="content">开卡即可享购票超值会员</div>
            <div class="bottom">有效期 6 个月</div>
          </div>
        </li>

        <li>
          <div class="card">
            <div class="header">
              <div class="left">耀莱成龙影城影城卡</div>
              <div class="right">10元起</div>
            </div>
            <div class="content">开卡即可享购票超值会员</div>
            <div class="bottom">有效期 6 个月</div>
          </div>
        </li>
        <li>
          <div class="card">
            <div class="header">
              <div class="left">耀莱成龙影城影城卡</div>
              <div class="right">10元起</div>
            </div>
            <div class="content">开卡即可享购票超值会员</div>
            <div class="bottom">有效期 6 个月</div>
          </div>
        </li>
        <li>
          <div class="card">
            <div class="header">
              <div class="left">耀莱成龙影城影城卡</div>
              <div class="right">10元起</div>
            </div>
            <div class="content">开卡即可享购票超值会员</div>
            <div class="bottom">有效期 6 个月</div>
          </div>
        </li>
        <li>
          <div class="card">
            <div class="header">
              <div class="left">耀莱成龙影城影城卡</div>
              <div class="right">10元起</div>
            </div>
            <div class="content">开卡即可享购票超值会员</div>
            <div class="bottom">有效期 6 个月</div>
          </div>
        </li>
        <li>
          <div class="card">
            <div class="header">
              <div class="left">耀莱成龙影城影城卡</div>
              <div class="right">10元起</div>
            </div>
            <div class="content">开卡即可享购票超值会员</div>
            <div class="bottom">有效期 6 个月</div>
          </div>
        </li>
        <li>
          <div class="card">
            <div class="header">
              <div class="left">耀莱成龙影城影城卡</div>
              <div class="right">10元起</div>
            </div>
            <div class="content">开卡即可享购票超值会员</div>
            <div class="bottom">有效期 6 个月</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="footer" @click="buy">去购票</div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import BScroll from '@better-scroll/core'
export default {
  components: {
    NavBar,
  },

  mounted() {
    this.$nextTick(() => {
      new BScroll(this.$refs.wrapper, {})
    })
  },
  methods: {
    buy() {
      this.$router.push({ name: 'detail' })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
}
.wrapper {
  height: calc(100vh - 250px);
  margin-top: 50px;
  overflow: hidden;

  .w-content {
    min-height: calc(100vh - 249px);
  }
}

.card {
  margin: 0 auto;
  margin-top: 50px;
  width: 630px;
  height: 300px;
  padding: 25px;
  padding-top: 40px;
  font-size: 28px;
  color: #ffffff;
  background-image: linear-gradient(122deg, #f25d85 9%, #f1a562 100%);
  border-radius: 12px;

  &.mt0 {
    margin-top: 0;
  }

  .header {
    display: flex;
    width: 100%;
    height: 20%;

    .left {
      width: 85%;
    }
  }
  .content {
    width: 100%;
    height: 60%;
    line-height: 120px;
    text-align: center;
  }
  .bottom {
    width: 100%;
    height: 20%;
    text-align: center;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 762px;
  height: 140px;
  text-align: center;
  font-size: 36px;
  color: #ffffff;
  line-height: 140px;
  border: 1px;
  background-color: #2c2f36;
}
</style>
